<template>
	<view class="content">
		<z-paging 
			v-if="firstLoaded || isCurrentPage" 
			ref="paging" 
			v-model="dataList" 
			@query="queryList" 
			:fixed="false" 
			:showScrollbar="false"
		>
      <view class="shop-list">
        <view class="shop-item" v-for="item in dataList" :key="item.id" @click="toShopDetails(item.goodsId)">
          <image :src="item.coverPic"/>
          <view class="shop-tag">
            <view v-if="item.fineness">{{item.fineness}}</view>
            <view v-if="item.isNew == 1">当季新款</view>
          </view>
          <view class="shop-name">{{ item.name }}</view>
          <text>¥{{ functions.formatToUSD(item.salePrice) }}</text>
        </view>
      </view>
		</z-paging>
	</view>
</template>

<script setup>
	import { defineExpose } from 'vue';  
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import {useSwiperItem} from '@/composables/swiperItem.js'
  import {sameGoodsList} from '@/api/shop.js'
	import functions from '../../utils/functions'
	
	const props = defineProps({
		//当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function(){
				return 0
			}
		},
		//当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function(){
				return 0
			}
		},
		//当前子分类id 
		typeId: {
			type: Number
		},
    //所有子分类id集合
    typeIdList:{
      type:Array,
      default:[]
    },
    priceSortIndex:{
      type: Number
    },
    finenessIndex:{
      type: Number
    },
    brandIndex:{
      type: Number
    },
    minPrice:{
      type:String
    },
    maxPrice:{
      type:String
    },
	})

  const {paging,dataList,firstLoaded,isCurrentPage} = useSwiperItem(props)

	//@query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
	const queryList = (pageNo, pageSize) => {
    const datas = {
			page: pageNo,
			pageSize: pageSize,
      typeId:[props.typeId]
		}
    if(props.typeId === 0){
      //获取全部
      datas.typeId = props.typeIdList
    }
    if(props.priceSortIndex !== 0) datas.priceState = props.priceSortIndex
    if(props.finenessIndex !== -1){
      datas.finenessId = [props.finenessIndex]
    }
    if(props.brandIndex !== -1){
      datas.brandId = [props.brandIndex]
    }
    if(props.minPrice) datas.minimumPrice = Number(props.minPrice)
    if(props.maxPrice) datas.maximumPrice = Number(props.maxPrice)
		

		sameGoodsList(datas).then(res => {
      console.log('条件搜索-----子分类数据',res)
			const newList = res.list.map(item => {
        let imgArr = item.coverPicJSON.filter(item2 => item2.type === 'image')
        return {...item,coverPic:imgArr[0].name}
      })
			// paging.value.complete(newList);
			paging.value.complete(newList);
			firstLoaded.value = true;
		}).catch(res => {
			paging.value.complete(false);
		});
	};

  const toShopDetails = (id) => {
		uni.navigateTo({
			url: '/pages/shopDetails/index?id=' + id
		});
	}

  const reload = () => {
    paging.value.reload()
  }

  defineExpose({ 
    reload 
  });


</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
	}

  .shop-list{
    width: 100%;
    // padding-top:calc(var(--status-bar-height) + 90rpx + 158rpx); 
    // position:relative;
    // z-index: 10;
    @include flex(row,space-between,flex-start,wrap);

    .shop-item{
      width: 374rpx;
      height: 432rpx;
      margin-bottom: 2rpx;
      background: linear-gradient( 164deg, #FFFFFF 0%, #F8F8F8 100%);
      border-top: 2rpx solid #F7F7F7;
      @include flex(column,flex-start,flex-start);
      image{
        width: 375rpx;
        height: 276rpx;
      }
      .shop-tag{
        width: 100%;
        height: 54rpx;
        margin-left: 30rpx;
        @include flex(row,flex-start);
        
        >view{
          // width: 100rpx;
          height: 30rpx;
          border: 1rpx solid #FE485B;
          font-weight: 400;
          font-size: 22rpx;
          color: #FE475B;
          text-align: center;
          line-height: 30rpx;
          margin-right: 12rpx;
          padding: 0 8rpx;
        }
        
      }
      .shop-name{
        width: 375rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        padding: 0 20rpx 0 30rpx;
        margin: 0 0 20rpx 0;
        box-sizing: border-box;
        @extend %text-overflow;
      }
      text:nth-of-type(1){
        font-family: Roboto, Roboto;
        font-weight: 500;
        font-size: 22rpx;
        color: #111111;
        padding-left: 30rpx;
      }
    }
  }
</style>